<template>
    <view class="page-login" v-if="show">
        <!-- <view class="page-login-logo"></view> -->
        <view class="page-login-close" @click="closeBtn" v-if="isClose"></view>
        <view class="page-login-logotitle">伯乐聘</view>
        <view class="page-login-title mt-48 gray-color">先面试、后入职，就上BolePin</view>
        <view class="page-login-title mt-48 gray-color">
            
            <pk-btn type="success" :isBlank="true" @click="loginBtn" :openType="usercheckout">
                一键登录
                <template #openType>
                    <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" v-if="usercheckout">一键登录</button>
                </template>
            </pk-btn> 
        </view>
        <view class="mt-72  f-12 gray-color flex-row  align-items-center page-login-tiptxt">
            <checkbox-group @change="handlerChange"><checkbox value="1" color="#00b4b3" style="transform:scale(0.7)"/> </checkbox-group>
            <text>使用该功能需注册/登录平台账号，阅读并同意</text><text class="color-green" @click="gowebtv('https://static.bytesbay.cn/policies/zh-CN/bolepin-privacy-policy.html')"> 用户协议 </text><text>和</text><text class="color-green" @click="gowebtv('https://static.bytesbay.cn/policies/zh-CN/bolepin-privacy-policy.html')"> 隐私政策  </text></view>
    </view>
  </template>
  
<script setup>
import { miniProgramextractOpenid, miniProgramAuthorization } from '@/api/api'
import { setItem } from '@/utils/store'
import WXLOG from '@/utils/log'
import { ref, onMounted, defineEmits, defineProps } from 'vue';
import { useInfoStore } from '@/store/info'
const userInfo = useInfoStore()
const emits = defineEmits(['onLogin', 'onClose'])
const usercheckout = ref(false)
defineProps({
    isClose: {
        type: Boolean,
        default: false
    }
})
const openId = ref('')
const code = ref('')
const show = ref(false)
const text = ref('')
 
onMounted(() => {
    getCode()
})

const getCode  = () => {
    text.value = '获取code' 
    WXLOG.info('info', '-------获取code-----------')
    wx.login({
    success (res) { 
        WXLOG.info('info', '-------得到code-----------', res.code)
        if (res.code) {
            //发起网络请求
            getOpenid(res.code)
        } 
     }
    })
}

const gowebtv = (e) => {
    uni.navigateTo({
        url: '/pages/webview/index?weburl=' + encodeURIComponent(e)
    });
}

const getOpenid = (e) => {
    text.value = 'getOpenid'
    miniProgramextractOpenid({
    code: e
    }).then(res => {
        WXLOG.info('info', '-------getOpenid-----------', JSON.stringify(res))
        text.value = 'set_Openid' + res.data.openid
        openId.value = res.data.openid
        if(res.data.token) {
            WXLOG.info('info', '-------老用户-----------', res.data.openid)
            setSystemInfo(res.data)
        } else{
            WXLOG.info('info', '-------新用户-----------', res.data.openid)
            show.value = true
        }
    })
} 

const setSystemInfo = (e) => {
    WXLOG.info('info', '-------setSystemInfo-----------', JSON.stringify(e))
    setItem('bytesbayToken', e.token)
    setItem('openId', e.openid)
    setItem('userinfo', JSON.stringify(e.profile))
    emits('onLogin', e.token)
    userInfo.SETTOKEN(e.token)
}

const handlerChange = (e) => {
    usercheckout.value = e.detail.value.length > 0 ? true : false;
}
const gotv = (e) => {
    uni.navigateTo({
        url: e
    })
}

const bindPhone = (e) => {
    WXLOG.info('info', '-------手机号码-----------', JSON.stringify(e))
    miniProgramAuthorization({
        openid: openId.value,
        iv: e.iv,
        encryptedData: e.encryptedData
    }).then(res => {
        setSystemInfo(res.data)
    })
}

  const loginBtn = () => {
    if (!usercheckout.value) {
        uni.showToast({
            icon: 'none',
            title: '请阅读并同意用户协议及隐私政策'
        })
        return
    }
  }

  const onGetPhoneNumber = (e) => {
    WXLOG.info('info', '-------新用户授权回调-----------', JSON.stringify(e))
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
        bindPhone(e.detail)
    }
  };

  const closeBtn = () => {
    emits('onClose')
  }

  const onClick = () => {
    message.value = '按钮被点击了！';
  };
  </script>
  
  <style lang="scss" scoped>
  .page-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex:1;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    &-close{
       position: absolute;
       top:40rpx;
       right:40rpx;
       width: 50rpx;
       height: 50rpx;
       background: url('@/static/closeicon.png')  center center /cover no-repeat;
       background-size: 40rpx;
    }
    &-logo{
        width: 320rpx;
        height: 120rpx;
        background: url('@/static/logo.svg')  center center /cover no-repeat;
    }
    &-logotitle{
        font-size: 52rpx;
    }
    &-title{
        font-size: 28rpx;
    }
    &-tiptxt{
        flex-wrap: wrap;
        padding: 0 32rpx
    }
  }
  </style>